<template>
	<popup direction="bottom" v-model="show">
		<view class="playMore flex" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="musicInfo flex">
				<view class="left">播放列表</view>
				<view class="right flex">
					<text class="iconfont icon-shunxu"></text>
					<!--text class="iconfont icon-suijibofang"></text>
					<text class="iconfont icon-danquxunhuan"></text-->
					<text class="text">顺序</text>
				</view>
			</view>
			<play-list-drag :list="list" @dragSortChange="dragSortChange" />
		</view>
	</popup>
</template>

<script setup>
	import { ref, inject, defineProps, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 播放列表
	const list = ref([
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240401/e659762a02dbbd9e6ffbc6c1e17079f4.jpg",
			title: "亲爱的，那不是爱情",
			nickname: "金发美女",
			playStatus: 1,
			index: 0,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg",
			title: "生日快乐",
			nickname: "1950s jazz scat",
			playStatus: 0,
			index: 1,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg",
			title: "Wake（Like）",
			nickname: "hillsong",
			playStatus: 0,
			index: 2,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg",
			title: "SPAGHETTI",
			nickname: "Italian",
			playStatus: 0,
			index: 3,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240401/e659762a02dbbd9e6ffbc6c1e17079f4.jpg",
			title: "亲爱的，那不是爱情",
			nickname: "金发美女",
			playStatus: 0,
			index: 4,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg",
			title: "生日快乐",
			nickname: "1950s jazz scat",
			playStatus: 0,
			index: 5,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg",
			title: "Wake（Like）",
			nickname: "hillsong",
			playStatus: 0,
			index: 6,
		},
		{
			cover: "https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg",
			title: "SPAGHETTI",
			nickname: "Italian",
			playStatus: 0,
			index: 7,
		}
	]);
	
	
	/* 方法区域 */
	// 位置变化了
	function dragSortChange(e){
		console.log(e);
	}
	
	// 打开弹窗
	function open() {
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.transverse-line {
		.transverse-line-view{
			background: rgba(255,255,255,0.1);
		}
	}
	.playMore{
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
		flex-direction: column;
		width: 100vw;
		background: linear-gradient(#232526, #202122);
		background: rgba(0,0,0,0.3);
		backdrop-filter: blur(30rpx);
		.musicInfo{
			padding: 0 $padding;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.left{
				font-size: calc(29rpx * var(--fss));
				line-height: 1.2;
				color: rgba(255,255,255,1);
				font-weight: bold;
			}
			.right{
				line-height: 55rpx;
				color: rgba(255,255,255,0.6);
				border: 2rpx solid rgba(255,255,255,0.3);
				flex-direction: row;
				align-items: center;
				padding: 0 26rpx;
				border-radius: 100rpx;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
				.iconfont{
					font-size: calc(24rpx * var(--fss));
				}
				.text{
					font-size: calc(25rpx * var(--fss));
					margin-left: 12rpx;
				}
			}
		}
	}
</style>